<template>
    <div>
        <headers></headers>
         <van-row>
             <van-col span="4">
              <left/>
            </van-col>
            <van-col span="20">
                <van-field
                v-model="name"
                name="name"
                label="角色名称"
                placeholder="请输入角色名称"
                :rules="[{ required: true, message: '请输入角色名称' }]"
            />
            <van-button type="info">查询</van-button>&emsp;&emsp;
            <van-button disabled type="primary">重置</van-button>
            <hr>
            <van-button type="info" @click="add_show">新增</van-button>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                <div v-show="is_show">
                    <van-button plain type="primary" @click="ss">取消</van-button>
                    <form action="" @submit.prevent="addd">
                        <p>角色名称: <input type="text" v-model="form1.name"></p>
                        <p>角色编码: <input type="text" v-model="form1.code"></p>
                        <button type="submit">提交</button>
                    </form>
                </div>
                <van-button disabled type="primary">导出</van-button>&emsp;&emsp;
                 <van-uploader :after-read="afterRead" multiple accept=".xls">导入</van-uploader>
                <table class="t1">
                <tr>
                    <td><input type="checkbox"></td>
                    <td>序号</td>
                    <td>角色名称</td>
                    <td>角色编码</td>
                    <td>操作</td>
                </tr>
                <tr v-for="i in rolelist" :key="i.id">
                    <td><input type="checkbox"></td>
                    <td>{{i.id}}</td>
                    <td>{{i.name}}</td>
                    <td>{{i.code}}</td>
                <td>
                    <button @click="role_del(i.id)">删除</button></td>
                </tr>
                </table>
            </van-col>
         </van-row>
         
    </div>
</template>

<script>
import headers from '../comm/headers.vue'
import left from '../comm/left.vue'
import axios from 'axios'
import maxios from '../http/axios'
export default {
    components:{
        'headers':headers,
        'left':left,
    },
    data() {
        return {
            name:'',
            code:'',
            is_show:false,
            form1:{},
            rolelist:[]
        }
    },
    methods: {
        add_show(){
            this.is_show = true
        },
        ss(){
            this.is_show = false
        },
        addd(){
            maxios('role','get',this.form1).then(res=>{
                alert(res.msg)
                this.is_show = false
            this.get_bumen()
            })
        },
        getrole(){
            axios({url:'http://localhost:5000/role',method:'get'}).then(res => {
                this.rolelist = res.data.list
            })
        },
        role_del(id){
            maxios('role','delete',id).then(res => {
                alert(res.msg)
            })
        },
    },
    created() {
        this.getrole()
    }
}
</script>

<style scoped>
.t1{
    width: 50%;
    height: 30%;
}
</style>
